<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form model-form">

    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">房间号</label>
        <div class="layui-input-block">
            <select class="layui-input" name="houseId" id="buildingId" lay-filter="buildingId">
                <option value="">请选择房间号</option>
            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">房东</label>
        <div class="layui-input-block">
            <input type="text" name="fangdong" id="userId"  autocomplete="off" layui-disabled="true" class="layui-input layui-disabled" readonly="readonly"  >
            <input type="hidden" id="area" name="area" >
        </div>
    </div>

<!--    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">费用类型</label>
        <div class="layui-input-block">
            <input name="typeId" class="layui-input" placeholder="请输入费用类型" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">开始时间</label>
        <div class="layui-input-block">
            <input type="text" name="startDate" id="startDateId" placeholder="请选择开始时间" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">结束时间</label>
        <div class="layui-input-block">
            <input type="text" name="endDate" id="endDateId" placeholder="请选择结束时间" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">单价金额</label>
        <div class="layui-input-block">
            <input name="money" class="layui-input" placeholder="请输入金额  元/平米" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">状态</label>
        <div class="layui-input-block">
            <select name="status"  lay-verify="required" required></select>
        </div>
    </div>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var xmSelect = layui.xmSelect;
        var laydate = layui.laydate;
        let map = new Map();
        let map1 = new Map();

        admin.req(getProjectUrl() + 'house/list', function(res) {
            $.each(res.data, function(index, option) {
                map.set(option.building+""+option.numbers,option.owner);
                map1.set(option.building+""+option.numbers,option.area);
                var $option = $("<option>").val(option.building+""+option.numbers).text(option.building+""+option.numbers);
                $("#buildingId").append($option);
                form.render("select");
            });
        }, 'get',{async: false});

        form.on('select(buildingId)', function(data){
            $("#userId").val(map.get(data.value));
            $("#area").val(map1.get(data.value));
        });



        admin.req(getProjectUrl() + 'owner/list', function(res) {
            $.each(res.data, function(index, option) {
                var $option = $("<option>").val(option.username).text(option.username);
                $("#ownerId").append($option);
                form.render("select")
            });
        }, 'get',{async: false});

        xnUtil.rendDictDropDown(null, 'status', 'jiaofei_state', '请选择缴费状态', null);

        laydate.render({
            elem: '#startDateId',
            type: 'datetime'
        });
        laydate.render({
            elem: '#endDateId',
            type: 'datetime'

        });

        var editData = admin.getLayerData('#addOrUpdateForm').data;
        if(editData !== null && editData !== undefined) {
            form.val('addOrUpdateForm', editData);
        }

        /**
         * 表单提交事件
         */
        form.on('submit(formSubmitBtn)', function (data) {
            layer.load(2);

            var url = editData ? getProjectUrl() + 'propertyInfo/edit' : getProjectUrl() + 'propertyInfo/add';
            console.log(data.field.area);
            console.log(data.field.money);

            data.field.money = Number(data.field.area) * Number(data.field.money);
            admin.req(url, JSON.stringify(data.field), function(res){
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                    admin.putLayerData('formOk', true, '#addOrUpdateForm');
                    admin.closeDialog('#addOrUpdateForm');
                });
            }, 'post');
            return false;
        });
    });
</script>
</body>
</html>
